<template>
  <el-card class="box-card">
      <template #header>
      <div class="card-header">
        <span class="title-span">
          <span>全文检索</span>
        </span>
        <el-form :inline="true" :model="formInline" class="demo-form-inline" @submit.native.prevent>
          <el-form-item style="width: 78%;">
            <el-input placeholder="请输入要检索的文件名、关键词或文本段落" v-model="keword" />
          </el-form-item>
          <el-form-item>
            <el-button @click="emptyFn">清空</el-button>
            <el-button type="primary" @click="onSearch" :loading="exportLoading" :disabled="exportLoading">查询</el-button>
          </el-form-item>
        </el-form>
        <span class="remark">注：仅支持pptx、ppt、doc、docx、xls、xlsx、pdf、txt 格式检索</span>
      </div>
    </template>
      <div class="text item">
        <div class="card-content" v-for="(item,i) in cardFiles">
            <div class="title-text" style="font-size: 16px">
                <div style="display: flex;align-items: center">
                    <p v-html="item.fileName"></p>
                    <span style="color: #2f7df1;margin-left: 10px;">{{item.suffix}}</span>
                </div>

                <div class="flex">
                    <el-button type="text" icon="View" @click="showPreview(item)">预览</el-button>
                    <el-button type="text" icon="Download" @click="downloadContent(item)">下载</el-button>
                </div>
            </div>
          <div style="margin-bottom: 20px;font-size: 14px" >{{item.createDate}}</div>
            <div class="content-text" v-html="item.content" ></div>
        </div>
        <el-image-viewer
          v-if="showViewer"
          @close="onViewerClose"
          :url-list="[fileUrl]"/>
    </div>
    <preViewFile :visible="showFile" :fileType="fileType" :url="fileUrl" @cancel="showFile=false"></preViewFile>
  </el-card>
</template>

<script lang="ts" setup>
    import { onMounted, onUnmounted, reactive, ref } from "vue";
    import {esSearchList, downloadFiles} from "@/api/knowledge/es";
    import {ElMessage} from "element-plus";
    import  preViewFile from '@/components/previewFile/index.vue'
    import {getFileDownloadPath, onGetFileDownloadPath, preViewPdf, preViewPPTToPdf} from "@/api/common";
    const cardFiles =ref<any>( []); // 模拟数据
    const keword=ref('');
    const exportLoading=ref(false);
    const fileUrl=ref()
    const showViewer=ref(false)
    // 文件预览
    const fileType=ref()
    const showFile=ref(false)
    const showPreview = (data: any) => {
      getFileDownloadPath(data.enclosureCode).then(res=>{
        if(res.code=='1'){
          const url=res.data
          if (/(.jpg|.jpeg|.png|.gif|.bmp|.svg)/.test(url)) {
            fileUrl.value = url
            showViewer.value = true;
          } else {
            if(data.suffix=='doc'||data.suffix=='docx') {
              preViewPdf(data.enclosureCode).then(res => {
                console.log(res)
                const blob = new Blob([res], {type: "application/pdf"})
                fileUrl.value = URL.createObjectURL(blob)
                fileType.value = 'pdf'
                showFile.value = true
              })
            }else if(data.suffix=='pptx'||data.suffix=='ppt'){
              preViewPPTToPdf(data.enclosureCode).then(res => {
                console.log(res)
                const blob = new Blob([res], {type: "application/pdf"})
                fileUrl.value = URL.createObjectURL(blob)
                fileType.value = 'pdf'
                showFile.value = true
              })
            }else if(data.suffix=='pdf'){
              onGetFileDownloadPath(data.enclosureCode).then(res => {
                console.log(res)
                const blob = new Blob([res], {type: "application/pdf"})
                fileUrl.value = URL.createObjectURL(blob)
                fileType.value = 'pdf'
                showFile.value = true
              })
            }else{
              onGetFileDownloadPath(data.enclosureCode).then(res => {
                console.log(res)
                const blob = new Blob([res], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"})
                fileUrl.value = URL.createObjectURL(blob)
                fileType.value = 'xlsx'
                showFile.value = true
              })
            }
          }
        }else{
          ElMessage.error("文件下载地址获取失败")
        }
      })

    }
    const onViewerClose = ()=>{
      showViewer.value = false;
    }
    const fileUrlOnlinePreview = (url:String, fileName:String) =>{
      const typeArr = ["doc", "docx", "ppt", "pptx", "xls", "xlsx"];
      let arr = url.split(".");
      let fileType = arr[arr.length - 1];
      let downloadUrl = "";
      if (typeArr.indexOf(fileType) !== -1) {
        // 谷歌预览地址 https://docs.google.com/viewer?url=
        downloadUrl = "https://view.officeapps.live.com/op/view.aspx?src=" + url;
      } else {
        downloadUrl = url;
      }
      const width = 1000;
      const height = 800;
      const top = (window.screen.availHeight - height) / 2;
      const left = (window.screen.availWidth - width) / 2;
      const openObj = window.open(
        downloadUrl,
        "",
        "width=" + width + ",height=" + height + ",top=" + top + ",left=" + left
      );
      openObj.document.title = fileName;
    }
    // 文件下载
    const downloadContent = ((row:any)=>{
      onGetFileDownloadPath(row.enclosureCode).then(res=>{
        const link = document.createElement("a");
        let blob = new Blob([res], {type: "application/vnd.ms-excel"});
        link.style.display = "none";
        link.href = URL.createObjectURL(blob);
        link.download = `${row.fileName.replace(/<.*?>/ig,"")}.${row.suffix}`;
        document.body.appendChild(link);
        link.click();
      }).catch(err=>{
        ElMessage.error(`文件下载失败`)
      })
    });

    //清空
    const emptyFn = () => {
        keword.value = '';
      exportLoading.value=false
      cardFiles.value=[]
    };
    //搜索
    const onSearch = () => {
        if(keword.value==undefined||keword.value==''){
          ElMessage.info(`请输入需要搜索内容`)
          return
        }
        exportLoading.value = true;
        esSearchList(keword.value).then(res=>{
            cardFiles.value=res.data;
      }).finally(()=>{
        exportLoading.value=false
      })
    };
</script>

<style lang="less" scoped>
    ::-webkit-scrollbar{display:none}
    .box-card {
      position: relative;
      .remark {
        display: block;
        color: #aaaaaa;
        margin: 20px 0;
      }
      .title-span {
        display: block;
        width: 100%;
        padding: 20px 0 30px 0;
        background: #ffffff;

        span {
          display: block;
          border-left: 5px solid #2e7cf1;
          color: #353A42;
          font-weight: bold;
          padding-left: 5px;
        }
      }
      .text {
        font-size: 0.85rem;
        min-height: 610px;
        overflow: scroll;

        .remark {
          display: block;
          color: #aaaaaa;
          margin: 20px 0;
          position: absolute;
          bottom: 0;
        }

          .card-content {
              height: 125px;
              font-size: 0.95rem;
              border-bottom: 1px solid #d7d7d7;

              .title-text {
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  margin: 10px 0 20px 0;
              }
              .content-text {
                  overflow: hidden;
                  white-space: nowrap;
                  height: 43px;
                  text-overflow:ellipsis;
              }
          }
      }

      .card-header {

        .el-form {
          width: 100% !important;
          display: flex !important;
          align-items: center;
          justify-content: space-between;
        }
      }
    }
</style>
